<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* BODY
=============================================================================*/

body {
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
  margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
  font-size: inherit;
}

h1 {
  font-size: 28px;
  color: #000;
}

h2 {
  font-size: 24px;
  border-bottom: 1px solid #ccc;
  color: #000;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  color: #777;
  font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
  margin-top: 0;
  padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
  margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
  color: #4183C4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
  padding-left: 30px;
}

ul li > :first-child, 
ol li > :first-child, 
ul li ul:first-of-type, 
ol li ol:first-of-type, 
ul li ol:first-of-type, 
ol li ul:first-of-type {
  margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}

dl dt:first-child {
  padding: 0;
}

dl dt>:first-child {
  margin-top: 0px;
}

dl dt>:last-child {
  margin-bottom: 0px;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}

dl dd>:first-child {
  margin-top: 0px;
}

dl dd>:last-child {
  margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
  font-size: 12px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
  margin: 0 0px;
  padding: 0px 0px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
}

pre>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}

pre code, pre tt {
  background-color: transparent;
  border: none;
}

kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 10px;
    padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
  border-left: 4px solid #DDD;
  padding: 0 15px;
  color: #777;
}

blockquote>:first-child {
  margin-top: 0px;
}

blockquote>:last-child {
  margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
  clear: both;
  margin: 15px 0;
  height: 0px;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 4px solid #ddd;
  padding: 0;
}

/* TABLES
=============================================================================*/

table th {
  font-weight: bold;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
  max-width: 100%
}
</style>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 生成目录列表
    var div1 = document.createElement("div");
    div1.style.cssText = "clear:both";
    var outline = document.createElement("div");
    outline.setAttribute("id", "outline-list");
    outline.style.cssText = "border:solid 1px #ccc; background:#eee; min-width:200px;padding:4px 10px;";

    var ele_p = document.createElement("p");
    ele_p.style.cssText = "text-align: left; margin: 0;";
    outline.appendChild(ele_p);

    var ele_span = document.createElement("span");
    // ele_span.style.cssText = "float: left;";
    var ele_text=document.createTextNode("目录");
    ele_span.appendChild(ele_text);

    var ele_a = document.createElement("a");
    ele_a.appendChild(document.createTextNode("[+]"));
    ele_a.setAttribute("href", "#");
    ele_a.setAttribute("onclick", "javascript:return openct(this);");
    ele_a.setAttribute("title", "点击打开目录");

    ele_span.appendChild(ele_a);
    ele_p.appendChild(ele_span);

    var ele_ol = document.createElement("ol");
    ele_ol.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
    ele_ol.setAttribute("id", "outline_ol");
    outline.appendChild(ele_ol);
    var div1 = document.createElement("div");
    div1.style.cssText = "clear:both";

    document.body.insertBefore(outline, document.body.childNodes[0]);
    // 获取所有标题
    var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
    if (headers.length < 2)
      return;

    // -----
    var old_h = 0, ol_cnt = 0;
    // -----

    for (var i = 0; i < headers.length; i++) {

      var ele_ols = null;
      var ele_Current = ele_ol;
      // 找出它是H几，为后面前置空格准备
      var header = headers[i];
      header.setAttribute("id", "t" + i + header.tagName);
      var h = parseInt(header.tagName.substr(1), 10);

      // -----
      if (!old_h){
        old_h = h;

      }

      if (h > old_h) {

        ele_ols = document.createElement("ol");
        ele_Current = ele_ol;
        if(ele_Current && ol_cnt > 0){
          var temp = ol_cnt;
          while(temp > 0){
            ele_Current = ele_Current.lastChild;
            temp--;
          }
        }
        ele_Current.lastChild.appendChild(ele_ols);
        ol_cnt++;
      } else if (h < old_h && ol_cnt > 0) {

        if (h == 1) {
          while (ol_cnt > 0) {
            ol_cnt--;
          }
        } else {
          ele_ols = document.createElement("ol");
          ele_Current = ele_ol;
          if(ele_Current && ol_cnt > 0){
            var temp = ol_cnt;
            while(temp > 1){
              ele_Current = ele_Current.lastChild;
              temp--;
            }
          }
        // var ele_Parent = ele_Current.parentNode();
        //ele_Current.appendChild(ele_ols);
        ol_cnt--;

        }
      } else if (h == old_h && ol_cnt > 0) {

        ele_Current = ele_ol;
        if(ele_Current && ol_cnt > 0){
          var temp = ol_cnt;
          while(temp > 0){
            ele_Current = ele_Current.lastChild;
            temp--;
          }
        }
        ele_Current = ele_Current.lastChild;
      }
      if (h == 1) {
        while (ol_cnt > 0) {
          ol_cnt--;
        }
      }
      if (h < old_h && ol_cnt > 0 && h != 1){
        ele_li = document.createElement("li")
        ele_Current.lastChild.appendChild(ele_li);
        old_h = h;
        var a = document.createElement("a");
        // 为目录项设置链接
        a.setAttribute("href", "#t" + i + header.tagName);
        // 目录项文本前面放置对应的空格
        a.innerHTML = header.textContent;
        ele_li.appendChild(a);
        continue;
      }

      old_h = h;
      // -----
      if (ele_ols){
        ele_li = document.createElement("li")
        ele_ols.appendChild(ele_li); 
      } else {
        ele_li = document.createElement("li")
        ele_Current.appendChild(ele_li);
      }
      var a = document.createElement("a");
      // 为目录项设置链接
      a.setAttribute("href", "#t" + i + header.tagName);
      // 目录项文本前面放置对应的空格
      a.innerHTML = header.textContent;
      ele_li.appendChild(a);
    }
    // -----
    while (ol_cnt > 0) {
      ol_cnt--;
    }
    // -----
    });
function openct(e) {
  if (e.innerHTML == '[+]') {
    // createTextNode
    e.setAttribute('title', '收起');
    e.innerHTML = '[-]';
    var element = document.getElementById("outline_ol");
    element.style.cssText = "margin-left:14px;padding-left:14px;line-height:160%;";
  } else {
    e.setAttribute('title', '展开');
    e.innerHTML = '[+]';
    var element = document.getElementById("outline_ol");
    element.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";
  }
  e.blur();
  return false;
}
</script>
</head>
<body>
<h1>ajax-day01</h1>
<h2>1. ajax　（asynchronous javascript and xml） 异步的js和xml</h2>
<h3>(1)什么是ajax?</h3>
<pre><code>是一种用来改善用户体验的技术，其本质是利用浏览器提供的一个
特殊对象（XMLHttpRequest对象，或者简称为ajax对象）向服务器
发送异步请求，服务器返回部分数据，浏览器利用这些数据对当前页
面做局部更新。整个过程，页面无刷新，不打断用户的操作。
注：
    异步请求，指的是当ajax对象发送请求时，浏览器不会销毁当前
页面，用户仍然可以对当前页面做其它操作。
</code></pre>

<p><img src="day01-ajax.png" /></p>
<h3>(2)如何获得ajax对象?</h3>
<pre><code>因为历史原因，需要区分浏览器。
function getAjax(){
    var xhr = null;
    if(window.XMLHttpRequest){
        //非ie浏览器
        xhr = new XMLHttpRequest();
    }else{
        //ie浏览器
        xhr = new ActiveXObject('MicroSoft.XMLHttp');
    }
    return xhr;
}
</code></pre>

<h3>(3)ajax对象有哪些重要的属性?</h3>
<pre><code>1)onreadystatechange: 绑订一个事件处理函数。
    注：
        readystatechange事件：当ajax对象的readyState
        属性值发生了任何的改变（比如从０变成了１）,就会
        产生该事件。
2)readyState:有五个值(0,1,2,3,4),用来获得ajax对象与服务器
        通信的进展状况。其中，4表示ajax对象已经获得了服务
        器返回的所有数据。
3)responseText:获得服务器返回的文本数据。
4)responseXML:获得服务器返回的xml数据。
5)status:获得服务器返回的状态码。
</code></pre>

<h3>(4)编程步骤</h3>
<pre><code>step1. 获得ajax对象
比如:
        var xhr = getAjax();
step2.利用ajax对象发送请求
方式一　发送get请求：   http协议　get post
    xhr.open(请求类型，请求地址，同步还是异步);
比如:
    xhr.open('get','check.do?uname=Sally',true);
    xhr.onreadystatechange = f1;
    xhr.send(null);
    注：
        true表示异步，false表示同步(当ajax对象发送请求时，
    浏览器会锁定当前页面，用户不能对当前页面做其它操作)。
    建议尽量少用同步。

方式二
    xhr.open('post','check.do',true);
    xhr.setRequestHeader('content-type',
    'application/x-www-form-urlencoded');
    xhr.onreadystatechange = f1;
    xhr.send('uname=Sally');
    注:(了解)
        按照http协议要求，post请求应该在请求数据包里面
        添加content-type消息头。ajax对象默认不会添加该
        消息头，所以，需要调用setRequestHeader方法来添加。

step3.编写服务器端的程序
    注：服务器端通常只需要返回部分数据。
step4.编写事件处理函数
    if(xhr.readyState == 4 &amp;&amp;
        xhr.status == 200){
        var txt = xhr.responseText;
        更新页面...
    }
</code></pre>

<h3>(5)缓存问题</h3>
<pre><code>1)什么是缓存问题?
    ie浏览器提供的ajax对象在发送get请求时，会比较请求地址
是否访问过，如果访问过，则不再发送新的请求，而是显示第一次
返回的结果。  
2)如何解决?
    在请求地址后面添加一个随机数。
</code></pre>

<h3>(6)编码问题</h3>
<pre><code>1)发送get请求
    a.为什么会有乱码?
        ie浏览器会使用gbk来编码，其它浏览器会使用utf-8
        来编码，服务器端默认会使用iso-8859-1来解码，所以
        会有乱码。
    b.解决方式
        step1. 服务器端，统一使用utf-8来解码
            URIEncoding=&quot;utf-8&quot;
            注意：只针对get请求有效。
        step2. 客户端，使用encodeURI函数对中文进行编码。
            注意:  encodeURI函数是javascript内置的函数，
                会使用utf-8对中文进行编码。
2)发送post请求
    a.为什么会有乱码?
        浏览器会使用utf-8来编码，而服务器端会使用iso-8859-1
        来解码。所以会产生乱码。
    b.解决方式?
        request.setCharacterEncoding(&quot;utf-8&quot;);
</code></pre>

<h1>ajax-day02</h1>
<h2>1. JSON (javascript object notation) 声明</h2>
<h3>(1)什么是JSON?</h3>
<pre><code>是一种轻量级的数据交换格式。
1)数据交换
    将要交换的数据先转换成一种与平台无关的数据格式（比如xml）,
然后发送给接收方来处理。
2)轻量级
    JSON相对于xml,文档更小，解析速度更快。
</code></pre>

<h3>(2)语法</h3>
<pre><code>1)表示一个对象
{属性名:属性值,属性名:属性值...}    
比如:
        {&quot;name&quot;:&quot;Sally&quot;,&quot;age&quot;:22}
注意：
    a.属性名必须使用双引号括起来。
    b.属性值可以是string,number,true/false,null,object。
    c.属性值如果是string,必须使用双引号括起来。
2)表示对象组成的数组
 [{},{},{}...]
</code></pre>

<h3>(3)使用JSON?</h3>
<pre><code>1)java对象转换成json字符串
    可以使用　jackson api　（ObjectMapper）
2)json字符串转换成javascript对象
    可以使用 javascript内置对象JSON提供的parse方法。
</code></pre>

<p><img src="day02-json.png" /></p>
<h2>2. jQuery对ajax编程的支持</h2>
<h3>(1)$.ajax方法</h3>
<pre><code>1)用法
    $.ajax({});
{}是一个对象，用来控制ajax对象如何向服务器发送请求，常用
的选项参数有如下几个:
    url   指定请求地址　(比如 &quot;quoto.do&quot;)
    type  指定请求类型　(比如 &quot;get&quot;)
    data  指定请求参数，有两种格式
            第一种　请求字符串形式　（比如 &quot;name=Sally&amp;age=22）
            第二种　对象形式（比如 {&quot;name&quot;:&quot;Sally&quot;,&quot;age&quot;:22}）
    dataType 指定服务器返回的数据类型，有如下几种:
            json    json字符串
            text    文本
            html    html文档
            xml     xml文档
            script  javascript脚本
    success  指定一个函数，用来处理服务器返回的数据。
            注：服务器处理正常，并且ajax对象已经获得了
            服务器返回的所有的数据。
    error    指定一个函数，用来处理服务器返回的数据。
            注：服务器发生异常。
    async   同步还是异步(true表示异步)。
</code></pre>

<h3>(2)load方法</h3>
<pre><code>1)作用：向服务器发送异步请求，并且将服务器返回的数据直接添加到
    符合要求的节点之上。
2)用法:
        $obj.load(url,[data]);
    注:
        $obj  要操作的节点，是一个jQuery对象。
        url  请求地址。
        data (可选) 指定请求参数，有两种格式(同上)。
</code></pre>

<h3>(3)一个实用方法</h3>
<pre><code>serialize(): 表单异步提交时，生成一个由各个表单域组成的
    一个请求字符串。
</code></pre>


</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
